<template>
  <div class="wrapper">
    <top-bar :leftClickHandler="leftClickHandler">
      <template v-slot:title>
        {{ $t("Withdraw") }}
      </template>
    </top-bar>
    <abnormal-page v-if="pageError" @retry="getData"></abnormal-page>
    <template v-else>
      <SwipeNotice />

      <div class="container">
        <div class="header">
          <balance-panel />
        </div>
        <div class="main">
          <div class="channel module">
            <div class="title">
              {{ $t("Please choose your payment method") }}
            </div>
            <ul class="channel-list">
              <li
                v-for="(item, index) in channelList"
                :key="index"
                @click="clickChannel(item)"
              >
                <yowin-img
                  v-if="item.effectiveChannel"
                  :src="item.img"
                  :default-img="'https://cdn.yowin.mobi/pub/uploadFile/other/d8df35db57f14473a835a52d07d581de.svg'"
                />
                <yowin-img
                  v-else
                  :src="item.forbiddenImg"
                  :default-img="'https://cdn.yowin.mobi/pub/uploadFile/other/d8df35db57f14473a835a52d07d581de.svg'"
                />
              </li>
            </ul>
          </div>
          <div class="desc module">
            <div class="title">{{ $t("Description") }}</div>
            <div class="content">
              1.{{
                $t(
                  "Each payment method has inventory,If the inventory is full,please come back tomorrow or choose other"
                )
              }}.
            </div>
            <div class="content">
              2.{{
                $t(
                  "Some payment methods have rates,which are subject to the actual page prompts"
                )
              }}.
            </div>
            <div class="content">
              3.{{ $t("The fastest transfer time is 1-7 working days") }}.
            </div>
            <div class="content">
              4.{{
                $t("If you have any questions,please contact customer service")
              }}.
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import { inject, onMounted, toRefs, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useWithdrawChannel } from "./hooks/useWithdrawChannel";
import BalancePanel from "./components/balancePanel.vue";
import SwipeNotice from "./components/swipeNotice.vue"; //add SwipeNotice


export default {
  components: {
    BalancePanel,
    SwipeNotice
  },
  setup(props) {
    const { state, getData, clickChannel } = useWithdrawChannel();
    const vueState = inject("vueState");
    const route = useRoute();
    const router = useRouter();
    let lottieEl = ref(null);
    const leftClickHandler = () => {
      router.push({ name: "me" });
    };
    onMounted(() => {
      window.trackEvent({ pageTitle: "withdrawpage", ev: "showListPage" });
      vueState.EventEmitter.immediately(
        "afterRegist",
        getData,
        vueState.pageStatus.afterRegist
      );
    });
    return {
      ...toRefs(state),
      getData,
      vueState,
      clickChannel,
      lottieEl,
      leftClickHandler,
    };
  },
};
</script>
<style lang="less" scoped>
.wrapper {
  height: 100%;
  background-color: white;
  .container {
    height: 100%;
    padding: 0.16rem 0.16rem 0.7rem;
    overflow-y: auto;
    & > .main {
      margin-top: 0.36rem;
      .channel {
        &-list {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          li {
            margin-top: 0.16rem;
            width: 1.62rem;
            height: 1.1rem;
            border-radius: 0.12rem;
            box-shadow: 0 0.08rem 0.16rem 0 rgba(10, 36, 99, 0.08);
          }
        }
      }
      .desc {
        margin-top: 0.24rem;
        .tips {
          margin-top: 0.1rem;
          color: #f99f02;
          font-size: 0.14rem;
          font-weight: 400;
          line-height: 0.24rem;
        }
        .content {
          margin-top: 0.08rem;
          font-size: 0.12rem;
          font-weight: 400;
          color: #9c9da6;
          line-height: 0.2rem;
        }
      }

      .module {
        .title {
          font-size: 0.16rem;
          font-weight: 500;
          color: #121314;
          line-height: 0.28rem;
        }
      }
    }
  }
}
</style>
